<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二，定义样式，复杂型页面三个简易结构，3次样式引用 -->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<!-- 增加一个样式  统一去掉页面样式效果 -->
		<link rel="stylesheet" href="css/public.css" />
		
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 一，设计小米整体简易结构：页头，主体，页尾
		     使用结构化标记   header  main  footer
		 -->
		
		 
		 <header>
		<!-- 控制页面：中控区 -->
		 <div id="wrapper"> 
		    <!-- 中控左区 -->
			<div class="head_left">
			    <ul>
			    <li><a href="#">小米网</a></li>
				<li><a href="#">MIUI</a></li>
				<li><a href="#">米聊</a></li>
				<li><a href="#">游戏</a></li>
				<li><a href="#">多看阅读</a></li>
				<li><a href="#">云服务</a></li>
				<li><a href="#">小米移动版</a></li>
				<li><a href="#">问题反馈</a></li>
				<li><a href="#" class="c">Select Region</a></li>
			    </ul>	 
			</div>
		    <!-- 中控右区 -->	
			<div class="head_right">
				 <ul>
					 <div class="che"></div>
					 <!-- 精灵图使用   icon图标 
					 1.使用文本样式元素进行补位 i b s u
					 2.使用矢量图  精灵图  png 【不失真】
					   优点：避免多次命名，减少服务器请求
					 3.如果使用补位元素，必须内边距[撑大]
					 4.定位
					 -->
				 	<li class="li_right"><i class="shop"></i> <a href="#" class="b">购物车(0)</a></li>
				 	<li><a href="#"class="c">注册</a></li>
				 	<li><a href="#">登录</a></li>
				 </ul>
			</div>
		 </div>
		 </header>
		 
		 <main>
			<!-- 面包屑导航 nav结构化元素：导航--> 
			<div id="ground">		
			<nav>
				<div class="wq">
					
				<div class="main_left">
						<div><img src="img/team_logo.png" alt="小米标" />
						    <img src="img/donghua.gif" alt="足球标" />
						</div>    
						
					    <div >
							<ul>
								<li><a href="#">小米盒子</a></li>
								<li><a href="#">红米</a></li>
								<li><a href="#">平板</a></li>
								<li><a href="#">电视</a></li>
								<li><a href="#">盒子</a></li>
								<li><a href="#">路由器</a></li>
								<li><a href="#">智能硬盘</a></li>
								<li><a href="#">服务</a></li>
								<li><a href="#">社区</a></li>
							</ul>
						</div>
					</div>	
				<!-- 右边框 -->	
				<div class="main_right">
					<div><img src="img/search.png" alt="搜索" /></div>
					<div>
						<span>平衡车</span>
						<span>小米手机4c</span>
					</div>
				</div>
				
				</div>
			</nav>
			
		 <!-- 大框架 -->
		 <div class="b">
		 <!-- 左栏区 -->
		 <aside>
			 <ul>
				 <div class="out"></div>
				 <li>手机 平板 电话卡</li>
				 <li>电视 盒子</li>
				 <li>路由器 智能硬件</li>
				 <li>移动电源 插线板</li>
				 <li>耳机 音箱</li>
				 <li>电池 存储卡</li>
				 <li>保护套 后盖</li>
				 <li>贴膜 其他配件</li>
				 <li>米兔 服装</li>
				 <li>箱包 其他周边</li>
			</ul>
		</aside>
		
		 <!-- 轮播图 figure 结构化元素 图片 图表 代码片段 -->
		  <figure>

		 <!-- 3.类似于html固定写法  -->
		 	<!-- 3.2  id="animation" js行为位主：轮播行为-->
		 	<div id="animation"></div>
		 	<!-- 3.3 class="container" 样式为主：开辟轮播空间-->
		 	<div class="container">
		 		<!-- 3.4选择轮播效果，延迟加载 -->
		 		<div class="banner " id="lazyload">
		 			<ul>
		 				<li><img src="img/banner01.jpg" alt="1" height="416px" /></li>
		 				<li><img src="img/banner02.jpg" alt="2" height="416px"/></li>
		 				<li><img src="img/banner03.jpg" alt="3" height="416px" /></li>
		 				<li><img src="img/banner04.jpg" alt="4" height="416px"/></li>
		 				<li><img src="img/banner05.jpg" alt="5" height="416px" /></li>
		 			</ul>
		 		</div>
		 	</div>	
 
		 </figure>
		 <!-- 轮播图： JavaScript 技术完成 
		      前端框架：简化开发模式 JavaScripe技术完成的轮播图
			           使用最简单的方式，功能一样!
			  terseBannerJS 专门针对轮播，使用方便，会html确定轮播!		   	   
		 -->
		 </div>
		 <!-- 轮播图下面四个图 -->
		 <div class="ab">
			 <ul>
			 	<li><img src="img/left.png" alt="" width="216px"/></li>
				<li><img src="img/subnav_icon01.png" alt=""  width="288px"/></li>
				<li><img src="img/subnav_icon02.jpg" alt="" width="288px"/></li>
				<li><img src="img/subnav_icon03.png" alt="" width="288px"/></li>
			 </ul>
		 </div>
		 <!-- 小米明星单品 -->
		 <div class="pear">
			   <h1>小米明星单品</h1>
			<div class="banner">
				<button class="prev">&lt;</button>
				<button class="next">&gt;</button>
			</div>
			 
		 </div>
		
		 <!-- --图片 -->
	<div class="apple">
		 <!-- 产品模块1 -->
		 <div class="container_star">
		 	<dl>
		 		<dt>
		 			<img src="img/chazuo.png" alt="" />
		 		</dt>
		 		<dd>小米智能插座&nbsp;基础班</dd>
		 		<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
		 		<dd class="product_price">49元</dd>
		 		
		 	</dl>
		 </div>
		 <!--产品模块2 -->
		 <div class="container_star cs1">
			 <dl>
				 <dt>
					 <img src="img/haraware_light.png" alt="" "/>
				 </dt>
				 <dd>小米空气净化器2</dd>
				 <dd class="product_content">净化能力高达310m3/h</dd>
				 <dd class="product_price">699元</dd>
			 </dl>
		 </div>
		 <!-- 产品模块3 -->
		 <div class="container_star cs2">
		 	<dl>
		 		<dt>
					<img src="img/chaban.png" alt=""/>
				</dt>
				<dd>小米智能插线板</dd>
				<dd class="product_content">手机远程控制家中电器，智能节电</dd>
				<dd class="product_price">69元</dd>
		 	</dl>
		</div>
		 <!-- 产品模块4 -->
		 <div class="container_star cs3">
		  	<dl>
		  		<dt>
		 			<img src="img/erji.png" alt=""/>
		 		</dt>
		 		<dd>小米圈铁耳机</dd>
		 		<dd class="product_content">动圈+动铁，双发声单元</dd>
		 		<dd class="product_price">69元</dd>
		  	</dl>
		 </div>
		 <!-- 产品模块5 -->
		 <div class="container_star cs4">
		  	<dl>
		  		<dt>
		 			<img src="img/luyouqi.png" alt="" height="130px"/>
		 		</dt>
		 		<dd>小米路由器 青春版</dd>
		 		<dd class="product_content">将高性能路由器，凝聚于掌心大小</dd>
		 		<dd class="product_price">79元</dd>
		  	</dl>
		 </div>
		 
 </div>
 </div>
<!-- 智能硬件 -->
	<div class="smart">
			<h1>智能硬件</h1>
			<div class="intelligent">
				<h2>查看全部 <img src="img/hardware_morebtn.png" alt="" /></h2>
			</div>
		</div>

<!-- 大框架 -->	

	<div class="big">
		<!-- 左部分 -->
		<div class="watch">
			<h1>米兔儿童电话手表</h1>
			<p>安全防走失，宝贝的贴身护卫</p>
			<p class="price">299元</p>
		</div>
		<!-- 右部分 -->
		<div class="right">
			<div class="right_top">
				<div class="right_top1">	
				<dl>
					<dt><img src="img/haraware_tizhongcheng.png" alt="" /></dt>
					<dd>小米体重秤</dd>
					<dd class="function">高精度压力传感器，手机管理全家健康</dd>
					<dd class="price">99元</dd>
				</dl>
			    </div>
				<div class="right_top1 rt1">	
				<dl>
					<dt><img src="img/haraware_luyouqi.png" alt="" "/></dt>
					<dd>小米路由器3</dd>
					<dd class="function">更安全更稳定，安全发售</dd>
					<dd class="price">149元</dd>
				</dl>
				</div>
				<div class="right_top1 rt2">
				<dl>
					<dt><img src="img/haraware_shouhuan.png" alt=""/></dt>
					<dd>小米手环 光感版</dd>
					<dd class="function">实时监测心率，科学运动</dd>
					<dd class="price">99元</dd>
				</dl>
				</div>
				<div class="right_top1 rt3">
				<dl>
					<dt><img src="img/haraware_anfang.png" alt="" /></dt>
					<dd>小米智能安防套装</dd>
					<dd class="function">智能警戒，为您的家增添一份安心</dd>
					<dd class="price">699元</dd>
				</dl>
				</div>
			</div>
			<div class="right_bottom">
				
				<div class="right_top1 rb">
				<dl>
					<dt><img src="img/haraware_xiaoyi.png" alt="" /></dt>
					<dd>小米运动相机</dd>
					<dd class="function">边玩边录边拍，手机随时分享</dd>
					<dd class="price">399元</dd>
				</dl>
				</div>
				<div class="right_top1 rb2 ">
				<dl>
					<dt><img src="img/haraware_xieya.png" alt="" /></dt>
					<dd class="name">iHealth智能血压计（蓝牙版）</dd>
					<dd class="function">送给父母的健康礼物</dd>
					<dd class="price">199元</dd>
				</dl>
				</div>
				<div class="right_top1 rb3"> 
				<dl>
					<dt><img src="img/dianfanbao_icon05.jpg" alt=""/></dt>
					<dd>小米智能摄像机 夜视版</dd>
					<dd class="function">能看能听能说，手机远程观看</dd>
					<dd class="price">149元</dd>
				</dl>
				</div>
				<div class="right_top1 rb ">
				<dl>
					<dt><img src="img/haraware_light.png" alt=""/></dt>
					<dd>Yeelight床头灯</dd>
					<dd class="function">触摸式操作，给卧室1600万种颜色</dd>
					<dd class="price">699元</dd>
				</dl>
				</div>
			</div>
		</div>
	</div>
	

<!-------- 搭配------------>	

	<div class="black_word">
		<h1>搭配</h1>
		<div class="hot_door">
		<ul>
			<li><a href="#">电池储存卡</a></li>
			<li><a href="#">电源</a></li>
			<li><a href="#">耳机音响</a></li>
			<li><a href="#">热门</a></li>
		</ul>
		</div>
	</div>
<div class="mi">
		<div class="mi_top">
			<!-- 第一个图 -->
		         <div class="all1"></div>
		   <!-- 第二个图 -->
		         <div class="all2">
			        <dl>
				       <dt><img src="img/dapei_icon03.png" alt="" /></dt>
				       <dd>小米路由器3</dd>
				       <dd class="function">更安全更稳定，安全发售</dd>
				       <dd class="price">149元</dd>
			        </dl>
			     </div>
				 <div class="all2 ">
				    <dl>
				       <dt><img src="img/dapei_icon04.png" alt="" /></dt>
				       <dd>小米手环 光感版</dd>
				       <dd class="function">实时监测心率，科学运动</dd>
				       <dd class="price">99元</dd>
				    </dl>
				 </div>
				 <div class="all2 ttt">
				    <dl>
				       <dt><img src="img/dapei_icon05.png" alt="" /></dt>
				       <dd>小米智能安防套装</dd>
				       <dd class="function">智能警戒，为您的家增添一份安心</dd>
				       <dd class="price">699元</dd>
				    </dl>
				 </div>
				 <div class="all2 ">
				    <dl>
				       <dt><img src="img/dapei_icon06.png" alt="" /></dt>
				       <dd>小米运动相机</dd>
				       <dd class="function">边玩边录边拍，手机随时分享</dd>
				       <dd class="price">399元</dd>
				    </dl>
				 </div>
		</div>
		
	<div class="mi_bottom">
		<div class="all1"></div>
		<div class="all2">
			<dl>
				<dt><img src="img/dapei_icon06.png" alt="" width="80px" height="120px" /></dt>
				<dd>小米智能摄像机 夜视版</dd>
				<dd class="function">能看能听能说，手机远程观看</dd>
				<dd class="price">149元</dd>
			</dl>
		</div>
		<div class="all2">
			<dl>
				<dt><img src="img/dapei_icon08.png" alt="" /></dt>
				<dd>小米智能摄像机 夜视版</dd>
				<dd class="function">能看能听能说，手机远程观看</dd>
				<dd class="price">149元</dd>
			</dl>
		</div>
		<div class="all2">
			<dl>
				<dt><img src="img/dapei_icon09.png" alt="" height="120px"/></dt>
				<dd>小米智能摄像机 夜视版</dd>
				<dd class="function">能看能听能说，手机远程观看</dd>
				<dd class="price">149元</dd>
			</dl>
		</div>
		<div class="all2 sss">
				<dl>
					<dt>
				      <img src="img/content-top_icon01.png" alt="" width="210px" width="150px"/>
			          <img src="img/content-top_icon02.png" alt="" width="210px" width="150px"/>
				   </dt>
				</dl>
		</div>
	</div>
</div>
<!----------------周边------------------------->	
		<div class="merchandise">
			<h1>周边</h1>
			<ul>
					<li><a href="#">热门</a></li>
					<li><a href="#">服装</a></li>
					<li><a href="#">米兔</a></li>
					<li><a href="#">生活周边</a></li>
					<li><a href="#">箱包</a></li>
			</ul>
		</div>
		<div class="metal_top">
		     <div class="first"></div>
		     <div class="al2">
				 <dl>
					 <dt><img src="img/peijian_icon03.png" alt="" /></dt>
				     <dd>小米金属鼠标垫</dd>
				     <dd class="function">49元</dd>
				     <dd class="price">6483人评价</dd>
			     </dl>
			 </div>
		     <div class="al2">
				 <dl>
				 	<dt><img src="img/peijian_icon04.png" alt="" /></dt>
				 	<dd>小米皮质笔记本</dd>
					<dd class="function">49元</dd>
					<dd class="price">3050人评价</dd>
				 </dl>
			 </div>
		     <div class="al2">
				 <dl>
				 	<dt><img src="img/peijian_icon05.png" alt="" /></dt>
				 	<dd>小米LED随身灯 增强版</dd>
				 	<dd class="function">19.9元</dd>
				 	<dd class="price">5.6万人评价</dd>
				 </dl>
			 </div>
			 
		     <div class="al2">
				 <dl>
				 	<dt><img src="img/peijian_icon06.png" alt="" /></dt>
				 	<dd>手机支架 小蜜蜂</dd>
				 	<dd class="function">19元</dd>
				 	<dd class="price">6.9万人评价</dd>
				 </dl>
			 </div>
			 	 
		</div>
		
		<div class="metal_bottom">
		     <div class="first"></div>
		     <div class="al2">
		     	<dl>
		     		<dt><img src="img/peijian_icon07.png" alt="" width="80px" height="120px" /></dt>
		     		<dd>小米防尘塞 MI标</dd>
		     		<dd class="function">3.9元</dd>
		     		<dd class="price">5.6万人评价</dd>
		     	</dl>
		     </div>
		     <div class="al2">
		     	<dl>
		     		<dt><img src="img/peijian_icon08.png" alt=""  height="120px"/></dt>
		     		<dd>小米智能摄像机 夜视版</dd>
		     		<dd class="function">149元</dd>
		     		<dd class="price">8461人评价</dd>
		     	</dl>
		     </div>
		     <div class="al2">
		     	<dl>
		     		<dt><img src="img/peijian_icon09.png" alt="" height="120px"/></dt>
		     		<dd>小米电源线收纳盒</dd>
		     		<dd class="function">39元</dd>
		     		<dd class="price">8461人评价</dd>
		     	</dl>
		     </div>
		     <div class="al2 jjj">
				 <dl>
					 <dt>
		     	     <img src="img/peijian_icon10.png" alt="" width="210px" width="150px"/>
		     	     <img src="img/content-top_icon02.png" alt="" width="210px" width="150px"/>
		     	     </dt>
				</dl>
		     </div>
		</div>
<!--------配件------------>		
<div class="accessory">
	<h1>配件</h1>
	<ul>
			<li><a href="#">其他配件</a></li>
			<li><a href="#">贴膜</a></li>
			<li><a href="#">后盖</a></li>
			<li><a href="#">保护套</a></li>
			<li><a href="#">热门</a></li>
	</ul>	
</div>
	<div class="accessory_top">
		<div class="first"></div>
		<div class="two">
			<dl>
				<dt><img src="img/zhoubian_icon03.png" alt=""></dt>
				<dd>小米自拍杆</dd>
				<dd class="function">49元</dd>
				<dd class="price">6.4万人评价</dd>
			</dl>
		</div>
		<div class="two">
			<dl>
				<dt><img src="img/zhoubian_icon04.png" alt="" height="110px"></dt>
				<dd>小米手机5 钢化膜（0.22mm）</dd>
				<dd class="function">29元</dd>
				<dd class="price">1万人评价</dd>
			</dl>
		</div>
		<div class="two">
			<dl>
				<dt><img src="img/zhoubian_icon05.png" alt="" height="110px"></dt>
				<dd>红米手机Note3 钢化膜（0.22mm）</dd>
				<dd class="function">699元</dd>
				<dd class="price">5.6万人评价</dd>
			</dl>
		</div>
		<div class="two">
			<dl>
				<dt><img src="img/zhoubian_icon06.png" alt=""height="110px"></dt>
				<dd>小米Note 标准贴膜（2片装）</dd>
				<dd class="function">19元</dd>
				<dd class="price">2.1万人评价</dd>
			</dl>
		</div>
	</div>	
	<div class="accessory_bottom">	
	     <div class="first"></div> 
	     <div class="two">
	     	<dl>
	     		<dt><img src="img/zhoubian_icon07.png" alt=""></dt>
	     		<dd>小米随身WIFI</dd>
	     		<dd class="function">19.9元</dd>
	     		<dd class="price">30.1万人评价</dd>
	     	</dl>
	     </div>
	     <div class="two">
	     	<dl>
	     		<dt><img src="img/zhoubian_icon08.png" alt=""></dt>
	     		<dd>小米百变随身杯</dd>
	     		<dd class="function">39元</dd>
	     		<dd class="price">1.2万人评价</dd>
	     	</dl>
	     </div>
	     <div class="two">
	     	<dl>
	     		<dt><img src="img/zhoubian_icon09.png" alt=""></dt>
	     		<dd>小米手机5 硅胶保护套</dd>
	     		<dd class="function">69元</dd>
	     		<dd class="price">215人评价</dd>
	     	</dl>
	     </div>
	     <div class="two ddd">
	     	<dl>
				<dt>
				<img src="img/zhoubian_icon10.png" alt="" width="210px" height="130px"/>
	     	     <img src="img/content-top_icon02.png" alt="" width="210px" height="130px"/>
	     	   </dt> 
			</dl>
	     </div>
	</div>
<!------------------热评产品----------------------->		
<div class="comment">
	<h1>热评产品</h1>
</div>

	<div class="hot_comment">
		<div class="hot_comment1">
			<dl>
				<dt><img src="img/hotproduct_icon01.png" alt="" width="270px"/></dt>
				<dd class="one">超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</dd>
				<dd class="two">来自于 香草忘忧 的评价</dd>
				<dd class="three">米兔手机U盘</dd>
				<dd class="four">49.9元</dd>
			</dl>
		</div>
		<div class="hot_comment1 one">
			<dl>
				<dt><img src="img/hotproduct_icon02.png" alt="" width="270px"/></dt>
				<dd class="one">绝对5星，音质挺好，包装也不错，物流也快</dd>
				<dd class="two">来自于 星星活火 的评价</dd>
				<dd class="three">小米活塞耳机 标准版</dd>
				<dd class="four">49.9元</dd>
			</dl>
		</div>
		<div class="hot_comment1 pop">
			<dl>
				<dt><img src="img/hotproduct_icon03.png" alt="" width="270px"/></dt>
				<dd class="one">做工没的说，摸起来非常细腻，而且比传统的插板稳固</dd>
				<dd class="two">来自于 林新城 的评价</dd>
				<dd class="three">小米插线板</dd>
				<dd class="four">49元</dd>
			</dl>
		</div>
		<div class="hot_comment1">
			<dl>
				<dt><img src="img/hotproduct_icon04.png" alt="" width="270px"/></dt>
				<dd class="one">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</dd>
				<dd class="two">来自于 人生如戏 的评价</dd>
				<dd class="three">小米头戴式耳机 标准版</dd>
				<dd class="four">499元</dd>
			</dl>
		</div>
	</div>
<!--------内容------>
	<div class="content">
		<h1>内容</h1>
	</div>
	<div class="contents">
		<div class="contents1">
			<div class="lll">
			<p>图书</p>
			<h1>阿弥陀佛，么么哒</h1>
			<dd>大冰新书，12个不舍得读完的、暖心的，真实的江湖故事</dd>
			<h6>9.99元</h6>
			<dt><img src="img/classify_icon01.png" alt="" /></dt>
		    </div>	
	    </div>
		<div class="contents1 qqq">
				<div class="lll">
				<p>主题</p>
				<h1>主题市场</h1>
				<dd>众多个性主题、百变锁屏与自由桌面让你的手机与众不同！</dd>
				<h6>MIUI</h6>
				<dt><img src="img/classify_icon02.png" alt="" /></dt>
			    </div>
		</div>
		<div class="contents1 eee">
				<div class="lll">
				<p>游戏</p>
				<h1>米柚手游模拟器</h1>
				<dd>在电脑上玩遍小米所有手游</dd>
				<h6>免费</h6>
				<dt><img src="img/classify_icon03.png" alt="" /></dt>
			    </div>
		</div>
		<div class="contents1 ooo">
				<div class="lll">
				<p>应用</p>
				<h1>2015年度应用</h1>
				<dd>彩世界，尽情下载</dd>
				<h6>免费</h6>
				<dt><img src="img/classify_icon04.png" alt="" /></dt>
			    </div>
		</div>
	</div>
<!----------视频---------->		
		<div class="video">
			<h1>视频</h1>
		</div>
		<div class="videos">
			<div class="videos_first">
				<dl>
					<dt><img src="img/video_icon01.jpg" alt="" width="270px"/></dt>
					<dd >笑喷了，沈腾爆笑出演，6集联播</dd>
					<dd class="one">小米Max沈腾爆笑预告全集</dd>
				</dl>
			</div>
			<div class="videos_first">
				<dl>
					<dt><img src="img/video_icon02.jpg" alt="" width="270px"/></dt>
					<dd >小米2016春季新品发布会</dd>
					<dd class="one">小米5 十余项黑科技亮相</dd>
				</dl>
			</div>
			<div class="videos_first">
				<dl>
					<dt><img src="img/video_icon03.jpg" alt="" width="270px"/></dt>
					<dd >15秒了解小米5 有多快</dd>
					<dd class="one">华少用超快语速告诉你小米5 到底有多快</dd>
				</dl>
			</div>
			<div class="videos_first">
				<dl>
					<dt><img src="img/video_icon04.jpg" alt="" width="270px"/></dt>
					<dd >《去探索》 小米年度品牌视频</dd>
					<dd class="one">与小米一起探索黑科技</dd>
				</dl>
			</div>
		</div>

 </main>
		 <footer>
		
		<div class="footer">
			<div class="container">
				<div class="container_one">
					<li><i class="one"></i><a href="">1小时快修服务</a></li>
					<li><i class="two"></i><a href="">7天无理由退货</a></li>
					<li><i class="three"></i><a href="">15天免费换修</a></li>
					<li><i class="four"></i><a href="">满150元包邮</a></li>
					<li><i class="five"></i><a href="">520余家售后网点</a></li>
				</div>
			</div>
			<div class="footer_container">
			 	<!-- 帮助中心栏 -->
			 	<div class="column">
			 		<h3>帮助中心</h3>
			 		<ul>
			 			<li><a href="a">购物指南</a></li>
			 			<li><a href="a">支付方式</a></li>
			 			<li><a href="a">配送方式</a></li>
			 		</ul>
			 	</div>
			 	<!-- 服务支付栏 -->
			 	<div class="column">
			 		<h3>服务支付</h3>
			 		<ul>
			 			<li><a href="a">售后政策</a></li>
			 			<li><a href="a">自助服务</a></li>
			 			<li><a href="a">相关下载</a></li>
			 		</ul>
			 	</div>
			 	<!-- 线下门店栏 -->
			 	<div class="column">
			 		<h3>线下门店</h3>
			 		<ul>
			 			<li><a href="a">小米之家</a></li>
			 			<li><a href="a">服务网点</a></li>
			 			<li><a href="a">线下专区</a></li>
			 		</ul>
			 	</div>
			 	<!-- 关于小米栏 -->
			 	<div class="column">
			 		<h3>关于小米</h3>
			 		<ul>
			 			<li><a href="a">了解小米</a></li>
			 			<li><a href="a">加入小米</a></li>
			 			<li><a href="a">联系我们</a></li>
			 		</ul>
			 	</div>
			 	<!--关于我们  -->
			 	<div class="column">
			 		<h3>关注我们</h3>
			 		<ul>
			 			<li><a href="a">新浪微博</a></li>
			 			<li><a href="a">小米部落</a></li>
			 			<li><a href="a">官方微信</a></li>
			 		</ul>
			 	</div>
			 	<!--特色服务  -->
			 	<div class="column">
			 		<h3>特色服务</h3>
			 		<ul>
			 			<li><a href="a">F码通道</a></li>
			 			<li><a href="a">小米移动</a></li>
			 			<li><a href="a">防伪查询</a></li>
			 		</ul>
			 	</div>
			 	<!-- 客服信息栏 -->
			 	<div class="column contact_column">
			 		<h3>400-100-5678</h3>
			 		<p>周一至周日 8:00-18:00</p>
			 		<p>（仅收市话费）</p>
			 		<a href="#">24小时在线客服</a>
			 	</div>
			 </div>
		</div>

	
	<div class="deep">
		<div class="rrr">
			<ul>
				<li class="first"><img src="img/team_logo.png" alt="" /></li>
			 	<li><a href="#">小米网</a></li>
				<li><a href="#">MIUI</a></li>
				<li><a href="#">米聊</a></li>
				<li><a href="#">多看书城</a></li>
				<li><a href="#">小米路由器</a></li>
				<li><a href="#">视频电话</a></li>
				<li><a href="#">小米后院</a></li>
				<li><a href="#">小米天猫店</a></li>
				<li><a href="#">小米淘宝直营店</a></li>
				<li><a href="#">小米网盟</a></li>
				<li><a href="#">问题反馈</a></li>
				<li><a href="#" >Select Region</a></li>
			</ul>	
				<p>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号违法和不良信息举报 电话：185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试诚信网站师范企业可信网站信用评价网上交易保障中心</p> 
             
            <div class="three">
				<img src="img/safe_icon01.png" alt="" />
				<span>诚信网站师范企业</span>
				<img src="img/safe_icon02.png" alt="" />
				<span>可信网站信用评价</span>
				<img src="img/safe_icon03.png" alt="" />
				<span>网上交易保障中心</span>
		    </div>
			<div class="deepest"><img src="img/aim_icon.png" alt="" /></div>
		</div>
		
	</div>
		
		 </footer>
		 <!--  2.引入jquery封装轮播框架 .js文件-->
		 <script src="js/highlight.pack.js"></script>
		 <script src="js/jquery-1.11.1.js"></script>
		 <script src="js/jquery.terseBanner.min.js"></script>
		 <script src="js/script.js"></script>
		 
		 <script>
		 			 $("div.b aside ul li").hover(function(){
		 				 $("div.b aside ul div.out").css("display","block");
		 			 },function(){
		 			     $("div.b aside ul div.out").css("display","none");
		 			 });
					 
					 
					 $("header div#wrapper div.head_right ul li.li_right").hover(function(){
					 	$("header div#wrapper div.head_right ul div.che").css("display","block");
					 },function(){
					     $("header div#wrapper div.head_right ul div.che").css("display","none");
					 });
					 
					 var so=$("nav").offset().top;
					 $(window).scroll(function(){
					 	//获取页面滚动值，动态值   scrollTop()获取滚动位置[动态值] 
					 	var st=$(window).scrollTop()
					 	//超过200px   动态值>固定值 200   条件满足：页面吸顶灯样式定死
					 	if(st>so){
					 		$("nav").addClass("ac");
					 	}else{
					 		$("nav").removeClass("ac");
					 	}
					 	
					 });
		 </script>
	</body>
</html>
